<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 1.抓到div */
			div{
				width: 400px;
				height: 400px;
				/* 效果：背景色 */
				background-color: #e4393c;
				/* 外边距属性：“推”    效果：居中*/
				margin-left: 10px;
				margin-top: 10px;
				/* 居中：上下 右左   auto   页面宽度固定*/
				margin: 300px auto;
				/* 旋转 转换属性：旋转属性值 */
				transform:rotate(45deg);
				/* 美化操作：滤镜属性--下阴影效果：光晕 */
				filter: drop-shadow(0 0 80px #ff2815);
				/* 启动动画属性：关键帧名称 过渡时间 流畅度 无限次*/
				animation: heart .8s linear infinite;
			}
			/* 伪类选择器  追加效果 
			：after  语法：任意选择器  配合属性 content:"内容"
			功能：追加一个效果：在元素之后生成一行文本内容
			*/
		   div:after{
			   content: "";
			   /* html很多元素：种类
			   
			   文本内容-->行内元素，特点：不可设置宽高，在一行内显示
			             块元素，特点：可设宽高，独占一行
						 行内元素转换为块元素---display属性：行转块
			   */
			  display: block;
			   width: 400px;
			   height: 400px;
			   background-color: #e4393c;
			   /* 倒角：画圆*/
			   border-radius: 50%;
			   /* 微调定位：*/
			   position: relative;
			   left: -200px;
			   top: -400px;
		   }
		   div:before{
			   content: "";
			   display: block;
			   width: 400px;
			   height: 400px;
			   background-color: #e4393c;
			   /* 倒角：画圆*/
			   border-radius: 50%;
			   /* 微调定位：*/
			   position: relative;
			   left: -0px;
			   top: -200px;
			   
		   }
		   
		   
		   /* 关键帧属性：功能：手翻书功能*/
		   @keyframes heart{
			   0%{
				   /* 缩放 转换属性 scale(1代表等比例，1以下缩小，1以上放大)*/
				   transform: rotate(45deg) scale(1);
			   }
			   30%{
				   transform: rotate(45deg) scale(.6);
			   }
			   100%{
				   transform: rotate(45deg) scale(1.2);
			   }
		   }
		</style>
	</head>
	<body>
		<!-- 心 html：div -->
		<div></div>
		<audio src="img/3月27日.mp3" autoplay Loop></audio>
	</body>
</html>